<template>
  <div class="PersonSimpleResume new-logo">
    <!-- 头部 -->
    <nav-bar :title="'我的在线简历'"></nav-bar>
    <div class="circle_bg"></div>

    <!-- 内容区域 -->
    <el-form :model="dataList" :rules="rulesadd" ref="Refform">
      <div class="main cl">
        <div class="block w1200">
          <div class="left fl">
            <el-alert
              v-if="checkResult && '成功' != checkResult"
              :title="checkResult"
              type="error"
            >
            </el-alert>
            <!-- <div class="top">
              <label>请填写信息</label>
            </div> -->
            <div class="resume">
              <!-- 个人信息 -->
              <div class="section userinfo">
                <div class="title">基本信息<span class="bt">必填</span></div>

                <!-- 姓名 -->
                <el-form-item prop="name" label="姓名">
                  <el-input
                    v-model="dataList.name"
                    placeholder="请填写姓名"
                    v-if="show"
                  >
                  </el-input>
                </el-form-item>

                <!-- 性别 -->
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="dataList.sex" v-if="show">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>

                <!-- 手机号码 -->
                <el-form-item label="手机号码" prop="phone">
                  <el-input
                    v-if="show"
                    type="number"
                    v-model="dataList.phone"
                    placeholder="请填写手机号码"
                  ></el-input>
                </el-form-item>

                <!-- 年龄 -->
                <el-form-item label="出生年月" prop="birthday">
                  <!-- <el-input
                    type="number"
                    v-if="show"
                    v-model="dataList.birthday"
                    placeholder="请输入出生年月"
                    maxlength="200"
                  ></el-input> -->
                  <el-date-picker
                    v-if="show"
                    style="width: 100%"
                    v-model="dataList.birthday"
                    type="month"
                    placeholder="出生年月"
                    value-format="timestamp"
                  >
                  </el-date-picker>
                </el-form-item>

                <!-- 现所住地 -->
                <el-form-item label="户口所在地" prop="homeTownCode">
                  <!-- <el-input
                    v-if="show"
                    v-model="dataList.homeTownCode"
                    placeholder="请填写户口所在地"
                    maxlength="200"
                  ></el-input> -->
                  <el-cascader
                    v-model="dataList.homeTownCode"
                    :options="areaList"
                    placeholder="请选择户口所在地"
                    style="width: 100%"
                  ></el-cascader>
                </el-form-item>
              </div>

              <!-- 教育经历 -->
              <div class="section education">
                <div class="title">教育经历</div>

                <!-- 最高学历 -->
                <el-form-item label="最高学历" prop="eduLevel">
                  <el-select
                    v-if="show"
                    v-model="dataList.eduLevel"
                    placeholder="请选择学历"
                    style="width: 100%"
                  >
                    <el-option label="未选择" value="-1"></el-option>
                    <el-option label="博士" value="7"></el-option>
                    <el-option label="MBA/EMBA" value="6"></el-option>
                    <el-option label="研究生" value="5"></el-option>
                    <el-option label="本科" value="4"></el-option>
                    <el-option label="大专" value="3"></el-option>
                    <el-option label="中专/中技" value="2"></el-option>
                    <el-option label="高中" value="1"></el-option>
                    <el-option label="初中" value="0"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="最高学位" prop="r1">
                  <el-select
                    v-if="show"
                    v-model="dataList.r1"
                    placeholder="请选择最高学位"
                    style="width: 100%"
                  >
                    <el-option label="学士" value="1"></el-option>
                    <el-option label="硕士" value="2"></el-option>
                    <el-option label="博士" value="3"></el-option>
                    <el-option label="无" value="0"></el-option>
                  </el-select>
                </el-form-item>

                <!-- 毕业院校 -->
                <el-form-item label="毕业院校" prop="schoolName">
                  <el-input
                    v-model="dataList.schoolName"
                    placeholder="请填写毕业院校"
                    v-if="show"
                  ></el-input>
                </el-form-item>

                <!-- 毕业时间 -->
                <el-form-item label="入学时间" prop="startEduTime">
                  <el-date-picker
                    v-if="show"
                    v-model="dataList.startEduTime"
                    type="month"
                    value-format="timestamp"
                    placeholder="毕业时间"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="毕业时间" prop="endEduTime">
                  <el-date-picker
                    v-if="show"
                    v-model="dataList.endEduTime"
                    type="month"
                    value-format="timestamp"
                    placeholder="毕业时间"
                  >
                  </el-date-picker>
                </el-form-item>

                <!-- 所学专业 -->
                <el-form-item label="所学专业" prop="major">
                  <el-input
                    v-model="dataList.major"
                    placeholder="请填写所学专业"
                    v-if="show"
                  ></el-input>
                </el-form-item>
              </div>

              <!-- 附件 -->
              <div class="section enclosure">
                <div class="title">附件</div>
                <div class="primary" v-if="!formEnclosureShow">
                  <ul>
                    <li v-for="(item, index) in fileList" :key="index">
                      <div class="txt">
                        <div class="t">
                          {{ item.fileRealName }}
                          <div
                            class="btnEdit"
                            @click="deleteInfo('formEnclosure', item.id)"
                          >
                            <i class="el-icon-delete"></i>删除
                          </div>
                          <!-- <div
                            class="btnEdit"
                            @click="
                              openFile(item.url, item.id, item.fileLastName)
                            "
                          >
                            <i class="el-icon-link"></i>查看
                          </div> -->
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="edit" v-if="formEnclosureShow">
                  <el-form
                    class="form cl"
                    label-width="25%"
                    :model="formEnclosure"
                    :rules="formEnclosureRules"
                    ref="formEnclosure"
                  >
                    <el-upload
                      ref="uploadFile"
                      class="upload"
                      :class="uploadFlag ? '' : 'hide'"
                      action="#"
                      :on-change="handleFile"
                      :on-remove="handleFileRemove"
                      :limit="1"
                      :auto-upload="false"
                      accept="*/*"
                      :file-list="formEnclosure.fileList"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="tip" class="el-upload__tip">
                        支持PNG、JPG、PDF、rar、doc、docx上传
                      </div>
                    </el-upload>
                  </el-form>
                </div>
              </div>

              <el-form-item class="box55">
                <el-button type="primary" @click="submitForm(dataList)"
                  >保存简历</el-button
                >
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  baseData,
  getResume,
  uploadFile,
  saveSimpleResume,
  addSimpleResume,
  editSimpleResume,
  querySimpleResume,
  resumeFileDelete,
} from "@/api/api";
import navBar from "@/components/navBar.vue";
import PersonUserInfo from "@/components/PersonUserInfo.vue";
import { VueCropper } from "vue-cropper";
import pdf from "vue-pdf";

const validateEduLevel = (rule, value, callback) => {
  if (value === "-1") {
    callback(new Error("请选择最高学历！"));
  } else {
    callback();
  }
};

// 校验手机号
const validateMobile = (rule, value, callback) => {
  if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error("请输入正确的手机号"));
  } else {
    callback();
  }
};
export default {
  //组件注入
  components: { navBar, PersonUserInfo, VueCropper, pdf },
  //存放数据
  data() {
    let checkNumberOfPerson = (rule, value, callback) => {
      if (value <= 0) {
        return callback(new Error(rule.message));
      }
      return callback();
    };
    return {
      // 手写简历
      dataList: {
        name: "", //姓名
        phone: "", //手机号码
        sex: "", //性别
        age: "", //年龄
        address: "", //现居住地
        workNatureName: "", //应聘岗位名称
        photoId: "", //头像ID
        eduLevel: "-1", //最高学历
        schoolName: "", //毕业院校
        endEduTime: "", //毕业时间
        major: "", //所学专业
        companyName: "", //公司名称
        workStartTime: "", //在职开始时间
        workEndTime: "", //在职结束时间
        positionNameStr: "", //职位名称
        workContent: "", //工作内容
        projectDescribe: "", //项目描述
        enclosureId: "", //附件文件id
      },

      // 验证规则
      rulesadd: {
        workNatureName: [{ required: true, message: "请填写岗位" }],
        homeTownCode: [{ required: true, message: "请填写户口所在地" }],
        birthday: [{ required: true, message: "请填写出生年月" }],
        sex: [{ required: true, message: "请填写性别" }],
        phone: [{ required: true, validator: validateMobile }],
        eduLevel: [
          {
            required: true,
            message: "请选择最高学历",
            validator: validateEduLevel,
          },
        ],
        name: [{ required: true, message: "请填写姓名" }],
        r1: [
          {
            required: true,
            message: "请选择最高学位",
            validator: validateEduLevel,
          },
        ],
        schoolName: [{ required: true, message: "请填写毕业院校" }],
        endEduTime: [{ required: true, message: "请填写毕业时间" }],
        major: [{ required: true, message: "请填写专业" }],
        startEduTime: [{ required: true, message: "请填写入学时间" }],
      },

      // 显示与隐藏
      show: true,

      ///////////////////////////////////////////////////////

      checkResult: "", //简历情况
      random: 0, //随机值（更新用户信息用）
      editType: "", //add 添加
      editId: "", //编辑id
      resumeId: "", //简历id
      formUserInfoShow: false, //个人信息编辑
      formEducationShow: false, //教育经历编辑
      UploadPhotoFlag: false, //上传头像
      formEnclosureShow: true,
      fileName: "",
      educationList: [], //教育经历列表
      formEnclosure: {
        //附件
        name: "", //证书名称
        file: {}, //文件
        fileList: [],
      },
      uploadFlag: true,
      formEnclosureRules: {
        //附件验证
        name: [{ required: false, message: "请填写附件名称" }],
        file: [{ required: true, message: "请上传附件" }],
      },
      fileList: [], //附件列表
      jobPosition: [], //职位
      areaList: [], //省市区
      searchList: [], //联想搜索列表
      industryList: [], //行业列表
      skills: [], //技能列表
      dialogVisible: false, //附件图片弹出
      dialogImageUrl: "", //附件图片
      dialogPdfUrl: "", //pdf
      numPages: undefined, //pdf
    };
  },
  //接受父组件传递的值
  props: [],
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 显示与隐藏
    showshow() {
      this.show = !this.show;
    },

    // 保存
    submitForm() {
      console.log(
        "JSON.stringify(this.dataList): " + JSON.stringify(this.dataList)
      );
      console.log(this.formEnclosure.file);
      if (!this.formEnclosure.file.name && !this.dataList.id) {
        this.$message.warning("请选择附件");
        return;
      }
      if (this.show === true) {
        this.$refs.Refform.validate((valid) => {
          if (valid) {
            // this.saveSimpleResumeFn();
            if (this.formEnclosure.file.name) {
              //先更新简历
              this.uploadEnclosure("formEnclosure", "add");
            } else {
              this.saveSimpleResumeFn();
            }
          } else {
            return false;
          }
        });
      }
    },
    async saveSimpleResumeFn() {
      const data = { ...this.dataList };
      data.homeTownCode = data.homeTownCode?.join(",");
      data.username = this.userName;
      console.log("data", data);
      if (this.dataList.id) {
        var res = await editSimpleResume(data);
      } else {
        var res = await addSimpleResume(data);
      }
      if (res.code === 200) {
        this.$message.success("保存成功");
        this.show = false;
        setTimeout(() => {
          this.$router.go(-1); //返回上一层
        }, 2000);
      } else {
        this.$message.error(res.message);
      }
    },

    //取消编辑简历
    cancelEdit(formName) {
      if (formName == "formEnclosure") {
        this[formName + "Show"] = true;
        // this.getResume()
      }
    },

    // 上传附件
    uploadEnclosure(formName, type) {
      // this.$refs[formName].validate((valid) => {
      // if (valid) {
      //上传附件
      if (formName === "formEnclosure") {
        if (!this.formEnclosure.file.name) {
          //this.$message.error('请上传文件');
          return false;
        }
        if (
          this.formEnclosure.name === null ||
          this.formEnclosure.name === ""
        ) {
          this.formEnclosure.name = this.formEnclosure.file.name.substring(
            0,
            this.formEnclosure.file.name.lastIndexOf(".")
          );
        }
        let type = this.formEnclosure.file.name.substring(
          this.formEnclosure.file.name.lastIndexOf(".") + 1
        );
        let date = new Date().getFullYear() + "/" + (new Date().getMonth() + 1);
        let formData = new FormData();
        formData.append(
          "file",
          this.formEnclosure.file,
          this.formEnclosure.name + "." + type
        ); //
        formData.append("biz", "public/user/" + date);
        uploadFile(formData).then((res) => {
          if (res.code === 200) {
            this.dataList.enclosureId = res.result.fileId;
            //this.$message.success('上传成功');
            // this.cancelEdit("formEnclosure");
            this.formEnclosureShow = false;
            this.fileList[0] = res.result;
            this.fileList[0].id = res.result.fileId;
            this.fileList[0].fileRealName = res.result.name;
            this.fileList[0].fileLastName = type;
            this.saveSimpleResumeFn(this.dataList).then((res) => {
              if (res.code === 200) {
                this.$message.success("保存成功");
              } else {
                this.$message.error(res.message);
              }
            });
          } else {
            this.$message.error(res.message);
          }
        });
      }
      // } else {
      //   console.log("error submit!!");
      //   return false;
      // }
      // });
    },
    //上传附件
    handleFile(file, fileList) {
      this.dataList.enclosureId = fileList[0].uid;
      let isLt5M = file.size / 1024 / 1024 < 5;
      let type = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (!isLt5M) {
        this.$message.error("上传文件大小不能超过 5MB!");
        this.$refs.uploadFile.clearFiles();
        return false;
      }
      if (
        !(
          type === "png" ||
          type === "jpg" ||
          type === "jpeg" ||
          type === "pdf" ||
          type === "rar" ||
          type === "doc" ||
          type === "docx"
        )
      ) {
        this.$message.error("请上传PNG、JPG、PDF、rar、doc、docx、格式的文件");
        this.$refs.uploadFile.clearFiles();
        return false;
      }
      if (fileList.length > 0) {
        this.uploadFlag = false;
      }
      this.formEnclosure.file = file.raw;
    },
    //删除
    deleteInfo(formName, id) {
      console.log(formName);
      this.$confirm("删除后不可恢复，确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //附件删除
        if (formName == "formEnclosure") {
          resumeFileDelete({
            id: this.dataList.id,
            enclosureId: id,
          }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.handleFileRemove();
              this.$set(this.dataList, "enclosureId", "");
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },
    //移除上传附件回调
    handleFileRemove() {
      this.formEnclosure.file = {};
      this.fileList = [];
      this.uploadFlag = true;
      this.formEnclosureShow = true;
    },
    //查看附件
    openFile(file, fileId, fileLastName) {
      let sign = "";
      //获取签名
      getSign({
        fileId: fileId,
      }).then((res) => {
        if (res.code === 200) {
          sign = res.result;
          if (fileLastName == "png" || fileLastName == "jpg") {
            this.handlePictureCardPreview(file + "?sign=" + sign);
          }
          if (fileLastName == "pdf") {
            this.handlePictureCardPreview();
            this.dialogPdfUrl = pdf.createLoadingTask(file + "?sign=" + sign);
            this.dialogPdfUrl.promise
              .then((pdf) => {
                this.numPages = pdf.numPages;
              })
              .catch((err) => {
                this.$message.error("简历预览失败");
                console.log(err);
              });
          }
        }
      });
    },
    //查看附件图片
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    getResume() {
      this.random = Math.random();
      querySimpleResume({
        userId: this.userId || "1111",
      }).then((res) => {
        if (res.code === 200) {
          const { newResume, newEduInfo, files, newUserInfo } = res.result;

          this.$set(this.dataList, "name", newUserInfo.name);
          this.$set(this.dataList, "birthday", newUserInfo.birthday);
          this.$set(
            this.dataList,
            "phone",
            newUserInfo?.phone || this.userName
          );
          this.$set(
            this.dataList,
            "homeTownCode",
            newUserInfo.homeTown?.split(",")
          );

          this.$set(this.dataList, "enclosureId", newResume.enclosureId);

          this.$set(this.dataList, "sex", newUserInfo?.sex);
          this.$set(this.dataList, "id", newResume?.id);
          this.$set(this.dataList, "schoolName", newEduInfo.schoolName);
          this.$set(this.dataList, "startEduTime", newEduInfo.startEduTime);
          this.$set(this.dataList, "endEduTime", newEduInfo.endEduTime);
          this.$set(this.dataList, "eduLevel", newEduInfo.eduLevel + "");
          this.$set(this.dataList, "major", newEduInfo.major);
          this.$set(this.dataList, "r1", newEduInfo.r1);

          // this.dataList.name = newResume.name;
          // this.dataList.birthday = newUserInfo.birthday; //this.$formatDateMonth(newUserInfo.birthday);
          // this.dataList.homeTownCode = newUserInfo.homeTown?.split(",");
          // this.dataList.phone = newUserInfo?.phone || this.userName;
          // this.dataList.sex = newUserInfo?.sex;
          // this.dataList.id = newResume?.id;
          // // this.dataList.id = "1893686142398627840";
          // console.log(this.$formatDateMonth(newUserInfo.birthday));
          // this.dataList.schoolName = newEduInfo.schoolName;
          // this.dataList.startEduTime = newEduInfo.startEduTime;
          // this.dataList.endEduTime = newEduInfo.endEduTime; //this.$formatDateDay(newEduInfo.endEduTime);
          // this.dataList.eduLevel = newEduInfo.eduLevel + "";
          // this.dataList.major = newEduInfo.major;
          // this.dataList.r1 = newEduInfo.r1;

          if (files && files?.length > 0) {
            this.fileList = files;
            this.formEnclosureShow = false;
          } else {
            this.formEnclosureShow = true;
          }

          //教育经历
          // if (res.result.userEduInfos) {
          //   let list = res.result.userEduInfos;
          //   for (let i in list) {
          //     list[i].startEduTime_dictText = this.$formatDateMonth(
          //       list[i].startEduTime
          //     );
          //     list[i].endEduTime_dictText = this.$formatDateMonth(
          //       list[i].endEduTime
          //     );
          //     list[i].studyTime = [list[i].startEduTime, list[i].endEduTime];
          //     list[i].recruitmentFlag = list[i].recruitmentFlag + "";
          //     list[i].eduLevel = list[i].eduLevel.toString();
          //   }
          //   this.educationList = list;
          //   // 获取最高学历
          //   this.dataList.schoolName = list[0].schoolName;
          //   this.dataList.endEduTime = this.$formatDateDay(list[0].endEduTime);
          //   this.dataList.eduLevel = list[0].eduLevel;
          //   this.dataList.major = list[0].major;
          // }

          //附件
          // if (res.result.files && res.result.files?.length > 0) {
          //   let list = res.result.files;
          //   this.fileList = list;
          //   this.formEnclosureShow = false;
          // } else {
          //   this.formEnclosureShow = true;
          // }
        } else {
          // this.dataList.name = "测试";
          // this.dataList.homeTownCode = "00001";
          // this.dataList.phone = "18695887213";
          // this.dataList.schoolName = "测试";
          // this.dataList.major = "测试";
          // this.dataList.id = "1893702995577667584";
        }
      }); //end of getResume
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //判断登录状态
    this.userLoginFlag("resume");
    this.resumeId = localStorage.getItem("resumeId");
    if (localStorage.getItem("userInfo")) {
      let _user = JSON.parse(localStorage.getItem("userInfo"));
      this.userName = _user.username;
      this.userId = _user.userId;
      console.log(this.userName);
      this.getResume();
    } else {
      // this.getResume();
      // this.dataList.name = "测试";
      // this.dataList.homeTownCode = "00001";
      // this.dataList.phone = "18695887213";
      // this.dataList.schoolName = "测试";
      // this.dataList.major = "测试";
      // this.dataList.id = "1893702995577667584";
    }
    //省市区查询
    baseData({
      clz: "area",
    }).then((res) => {
      if (res.code === 200) {
        this.areaList = res.result;
      }
    });
    //职位查询
    // baseData({
    //   clz: 'position'
    // }).then(res => {
    //   if (res.code === 200) {
    //     this.jobPosition = res.result
    //   }
    // })
    //行业查询
    // baseData({
    //   clz: 'industry'
    // }).then(res => {
    //   if (res.code === 200) {
    //     this.industryList = res.result
    //   }
    // })
  },
};
</script>

<style lang="scss">
@import "../../styles/mixin.scss";
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin text-ellipsisclamp($clamp) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $clamp;
  overflow: hidden;
}

@mixin transition {
  transition: all 0.3s;
}

.bt {
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  font-size: 20px;
  color: #fff;
  font-weight: normal;
  border-radius: 10px 0px 10px 0px;
  background: #e54437;
  display: inline-block;
  text-align: center;
  vertical-align: 2px;
  margin-left: 5px;
}

.PersonSimpleResume {
  //background: #f6f6f6;
  position: relative;
  width: 100%;
  overflow: hidden;

  .el-input__inner {
    height: 60px;
  }

  .el-range-input {
    font-size: 22px;
  }

  .el-date-editor .el-range-separator {
    font-size: 22px;
  }

  .el-form-item__error {
    font-size: 18px;
  }

  .el-button {
    font-size: 22px;
  }

  .main {
    position: relative;
    z-index: 0;
    min-height: 500px;

    .banner {
      width: 100%;
      height: 120px;
      background: url("../../assets/person-bg.jpg") center no-repeat;
      background-size: cover;
    }

    .block {
      height: auto;
      overflow: hidden;
      margin-top: 30px;
      padding-bottom: 60px;

      .left {
        width: 100%;
        height: auto;
        overflow: hidden;

        .top {
          height: auto;
          overflow: hidden;
          background: #eee;
          padding: 15px 30px;

          label {
            font-size: 28px;
            color: #666;
            font-weight: bold;
            line-height: 40px;
            display: inline-block;
            vertical-align: -1px;
          }

          .el-select {
            width: 180px;

            .el-input__inner {
              font-size: 28px;
              border: 0 !important;
              background: none !important;
              color: #e54437;
              font-weight: bold;
            }

            .el-option {
              font-size: 28px;
            }
          }
        }

        .resume {
          height: auto;
          overflow: hidden;
          padding: 30px;
          background: #fff;

          .section {
            height: auto;
            overflow: hidden;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f2f2f2;

            .title {
              font-size: 30px;
              color: #333;
              font-weight: bold;
              position: relative;
              padding-left: 15px;
              margin-bottom: 10px;

              &:after {
                content: "";
                width: 3px;
                height: 15px;
                background: #e54437;
                position: absolute;
                left: 0;
                top: 3px;
              }

              .btnEdit {
                opacity: 1;
              }
            }

            .btnEdit {
              opacity: 0;
              float: right;
              font-size: 24px;
              /*font-weight: normal;*/
              font-weight: bold;
              color: #999;
              @include transition();
              cursor: pointer;

              margin: 0 10px 0 20px;

              i {
                margin-right: 4px;
              }

              &:hover {
                color: #e54437;
              }
            }

            .form {
              height: auto;
              padding: 30px;

              .el-radio {
                min-width: 100px;
                text-align: center;
                margin: 0 15px 0 0;
                border-radius: 0;
                background: #fff;

                &:last-child {
                  margin: 0;
                }
              }

              .label {
                width: 25%;
              }

              .el-row {
                margin-bottom: 22px;
              }

              .el-input,
              .el-select,
              .el-cascader {
                width: 100%;
              }

              .el-input__inner {
                border-radius: 0;
              }

              .el-icon-date,
              .el-input__icon {
                vertical-align: -2px;
              }

              .el-textarea__inner {
                height: 100px;
                border-radius: 0;
                padding: 10px 15px;
              }

              .el-textarea .el-input__count {
                line-height: normal;
              }

              .el-form-item:last-child {
                margin: 0;
              }

              .left,
              .right {
                width: 48%;
                height: auto;
                overflow: visible;
              }

              .el-upload {
                width: 140px;
                height: 140px;
                line-height: 140px;
                border: 1px dashed #dcdfe6;
                border-radius: 5px;
                cursor: pointer;

                i {
                  font-size: 24px;
                  color: #999;
                }
              }

              .hide {
                .el-upload,
                .el-upload__tip {
                  display: none;
                }
              }
            }

            .el-form_edit {
            }

            .primary {
              height: auto;
              overflow: hidden;
              position: relative;

              ul {
                height: auto;
                overflow: hidden;

                li {
                  height: auto;
                  overflow: hidden;
                  margin-bottom: 10px;

                  .t {
                    font-size: 24px;
                    color: #333;

                    span {
                      font-size: 20px;
                      color: #999;
                      margin-left: 10px;
                    }

                    .btnEdit {
                      margin-right: 0;
                    }
                  }

                  .dsc {
                    font-size: 18px;
                    color: #888;
                    line-height: 30px;
                    margin-top: 8px;

                    span {
                      margin-right: 15px;
                      position: relative;
                      padding-right: 15px;

                      &:after {
                        content: "";
                        width: 1px;
                        height: 12px;
                        background: #eee;
                        position: absolute;
                        right: 0;
                        top: 2px;
                      }

                      &:last-child {
                        margin: 0;
                        padding: 0;

                        &:after {
                          display: none;
                        }
                      }
                    }

                    .tt {
                      color: #666;
                    }

                    p {
                      line-height: 22px;
                      white-space: pre-wrap;
                    }
                  }

                  dl {
                    height: auto;
                    overflow: hidden;
                    margin-top: 8px;

                    dd {
                      width: 80%;
                      font-size: 24px;
                      color: #666;
                      float: left;
                      line-height: 30px;
                      padding: 5px;

                      span {
                        line-height: 24px;
                        padding: 0 10px;
                        background: #eee;
                        display: inline-block;
                        margin-right: 10px;
                      }
                    }
                  }

                  &:last-child {
                    margin: 0;
                  }
                }
              }

              .txt {
                white-space: pre-wrap;
                word-wrap: break-word;
                font-size: 24px;
                color: #666;
                cursor: pointer;
                padding: 10px;
                @include transition();

                &:hover {
                  background: #f9f9f9;

                  .btnEdit {
                    opacity: 1;
                  }
                }
              }
            }

            .edit {
              height: auto;
              overflow: hidden;
              position: relative;
              background: #f6f6f6;
              margin-top: 20px;
              font-size: 24px;
            }

            .edit_margin_top {
              margin-top: 40px;
            }

            .edit .el-form .el-row .el-col .el-form-item .el-form-item__label {
              font-size: 24px;
            }

            .el-form-item__content .el-input__inner {
              font-size: 24px;
            }

            .el-form-item__content .el-radio__label {
              font-size: 24px;
            }

            .el-cascader-node__label {
              font-size: 24px;
            }

            .el-form-item__label {
              font-size: 24px;
            }

            &:last-child {
              margin: 0;
              padding: 0;
              border: 0;
            }
          }

          .userinfo {
            .photo {
              //width: 80px;
              //height: 80px;
              border-radius: 50%;
              overflow: hidden;
              float: left;
              margin-right: 20px;
              cursor: pointer;
              position: relative;

              img {
                width: 100%;
                height: 100%;
              }

              .avatar-uploader {
                width: 100%;
                height: 100%;
                background: rgba($color: #000000, $alpha: 0.5);
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
                @include transition();

                i {
                  font-size: 24px;
                  color: #fff;
                }

                p {
                  font-size: 20px;
                  color: #fff;
                }

                &:focus {
                  color: #fff;
                }

                .el-upload {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-flow: column;
                  align-items: center;
                  justify-content: center;
                }
              }

              &:hover .avatar-uploader {
                opacity: 1;
              }
            }

            .btnEdit {
              opacity: 1;
            }

            .text {
              height: auto;
              overflow: hidden;

              .name {
                font-size: 28px;
                color: #333;
                font-weight: bold;

                span {
                  font-size: 22px;
                  color: #999;
                  font-weight: normal;
                  margin-left: 10px;
                }
              }

              .other {
                height: auto;
                overflow: hidden;
                margin-top: 0px;

                span {
                  font-size: 24px;
                  color: #666666;
                  position: relative;
                  padding-right: 15px;
                  margin-left: 15px;

                  &:after {
                    content: "";
                    width: 1px;
                    height: 12px;
                    background: #e8e8e8;
                    position: absolute;
                    right: 0;
                    top: 3px;
                  }

                  &:first-child {
                    margin: 0;
                  }

                  &:last-child:after {
                    display: none;
                  }
                }
              }

              .contact {
                height: auto;
                overflow: hidden;
                margin-top: 0px;

                span {
                  font-size: 24px;
                  color: #333;
                  margin-right: 30px;

                  i {
                    font-size: 16px;
                    vertical-align: -1px;
                    color: #999;

                    &.icon-email {
                      font-size: 17px;
                      margin-right: 3px;
                    }
                  }
                }
              }
            }

            .btnEdit {
              position: absolute;
              right: 0;
              top: 0;
            }

            .look {
              font-size: 24px;
              font-weight: bold;
              color: #999;
              cursor: pointer;
              position: absolute;
              right: 0;
              top: 50px;
              margin: 0 10px 0 20px;
              @include transition();

              i {
                margin-right: 4px;
              }

              &:hover {
                color: #e54437;
              }
            }
          }

          .wantJob,
          .work,
          .education {
            .el-input {
              width: 100% !important;
            }

            .el-radio {
              min-width: 100px !important;
            }
          }

          .project {
            .el-textarea__inner {
              height: 150px !important;
            }
          }
        }
      }

      .right {
        width: 270px;
        height: auto;
        overflow: hidden;
      }
    }
  }

  .uploadPop {
    .vue-cropper {
      height: 300px;

      img {
        transition: none;
      }
    }

    .btns {
      text-align: center;
      margin-top: 25px;

      .el-button {
        width: 100px;
        margin: 0 10px;
      }
    }
  }

  .lookFile {
    .box {
      height: auto;
      max-height: 500px;
      overflow-y: auto;

      img {
        display: block;
        margin: 0 auto;
      }
    }
  }
}

.el-radio.is-bordered {
  height: 58px;
}
</style>

<style scoped>
.box88 {
  padding: 10px 0 0 18px;
}

.box77 {
  position: absolute;
  right: 30px;
  font-size: 28px;
  font-weight: bold;
  color: #999;
  cursor: pointer;
  margin: 0 10px 0 20px;
}

.box22 {
  width: 140px;
  height: 140px;
  line-height: 140px;
  border: 1px dashed #dcdfe6;
  border-radius: 5px;
  cursor: pointer;
}

.box66 {
  margin-top: 0;
  padding-top: 0;
  /* line-height: 0px; */
  /* background-color: black; */
}

.box55 {
  margin-top: 30px;
  text-align: center;
}
</style>
